<template>
	<view>
		<z-paging :show-refresher-when-reload="true"  show-refresher-update-time  ref="paging" v-model="dataList" @query="queryList">
			<!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
			<!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
			<view slot="top" class="">
				<u-navbar :borderBottom="false" back-text=" " :title="title"></u-navbar>
				<view class="bar_css">
					<u-tabs bar-width="118" :list="barList" font-size="28rpx" :bar-style="barStyle" :active-item-style="item_style" :is-scroll="true" :current="current" @change="barChange"></u-tabs>
				</view>
				<view style="height: 10rpx;"></view>
			</view>
			
		    <view class="list" >
				<view   v-for="(item,index) in dataList" :key="index"  class="">
					<view v-if="current<5 || current>10 " class="list_item_box">
						<view class="list_item">
							<view v-if="current==4" class="radios">
								<view v-if="!item.isChoose"  @click="radioChoose(index)" class="choose_radio_box">
								</view>
								<view v-else @click="radioChoose(index)" class="choose_radio_box">
									<view class="choose_radio_box_choose"> </view>
								</view>
							</view>
							<u-image @click="seeInfo(item.pic)"  border-radius="8" width="112rpx" height="112rpx" :src="item.pic"></u-image>
							<view @click="toInfo(item.id)" class="list_item_info">
								<view v-if='type==2' class="info_item">
									<span class="list_item_title">代购平台:</span>
									<view class="list_item_text" >{{item.platform?item.platform:'-'}}</view>
								</view>
								<view v-if='type==1' class="info_item">
									<span class="list_item_title">代购链接:</span>
									<view class="list_item_text" >{{item.link?item.link:'-'}}</view>
								</view>
								<view  class="info_item">
									<span class="list_item_title">微信账号:</span>
									<view class="list_item_text" >{{item.style?item.style:'-'}}</view>
								</view>
								<view v-if="current<3 " class="info_item">
									<span class="list_item_title">数量:</span>
									<view class="list_item_text" >{{item.num?item.num:'-'}}</view>
								</view>
								<view v-if="current==1 " class="info_item">
									<span class="list_item_title">价格:</span>
									<view class="list_item_text" style="color: #FF0000;" >{{item.price?`¥${item.price}`:'-'}}</view>
								</view>
							</view>
						</view>
						<view class="list_item_bottom">
							<view class="bottome_left">
								{{item.add_time}}
							</view>
							<view v-if="current==0" @click="del(item.id)" class="bottome_right">
								取消订单
							</view>
							<view v-if="current==1" @click="wxPay(item.id , item)" class="bottome_right">
								立即支付
							</view>
							<view v-if="current==2" @click="tui_show_pop(item)" class="bottome_right">
								申请退款
							</view>
							<view v-if="current==5" @click="delShure(item.id)" class="bottome_right" style="background-color: #FF0000;">
								删除订单
							</view>
						</view>
					</view>
					<view class="list_item_box" v-else>
						<view class="ruKu_item">
							<view  v-for="(ite,ind) in item.info_list" :key="ind" class="">
								<view class="info_list_item">
									<u-image @click="seeInfo(ite.pic_first)"  border-radius="8" width="112rpx" height="112rpx" :src="ite.pic_first"></u-image>
									<view @click="navTo(`/pages/order_other_list/Postage_order?id=${item.id}`)" class="info_list_item_right">
										<view class="info_list_item_right_span">
											单号:{{ite.code}}	
										</view>
										<view class="info_list_item_right_name">
											{{ite.name}}
										</view>
									</view>
								</view>
							</view>
							<view  class="ruKu_item_header">
								<view class="ruKu_item_header_weight">
									<span @click="copy(item.code)" class="font_bold"> 入库编号</span>: {{item.code}}
									 <u-icon @click="copy(item.code)"  name="cut" style="margin-left: 5rpx;" color="#6993b7" size="28"></u-icon>
								</view>
								<view v-if="item.express_code?true:false" class="ruKu_item_header_weight">
									<span @click="copy(item.express_code)" class="font_bold"> 直邮单号</span>: {{item.express_code?item.express_code:''}}
									 <u-icon @click="copy(item.express_code)"  name="cut" style="margin-left: 5rpx;" color="#6993b7" size="28"></u-icon>
								</view>
								<span class="ruKu_item_header_weight"><span class="font_bold">总重量</span>: {{item.weight?`${item.weight}kg`:'暂无重量'}}</span>
								<span class="ruKu_item_header_weight"><span class="font_bold">邮费</span>: {{item.weight?`Ұ${item.postage}`:'暂无邮费'}}</span>
								<span class="ruKu_item_header_weight"><span class="font_bold">创建时间</span>: {{item.add_time}}</span>
							</view>
							<view class="list_item_bottom" style="height: auto; padding: 10rpx 0;">
								<span class="ruKu_item_header_weight">
									<!-- {{barList[current].name}} -->
								</span>
								<view class="">
									<view v-if="item.status==10" @click="youFei_pay(item)" class="bottome_right">
										支付邮费
									</view>
									<view v-if="item.status==11 && item.is_apply_refund_postage==0" @click="youFei_tui(item)" class="bottome_right">
										邮费退款
									</view>
									<view v-if="item.status==15 && (item.is_apply_refund_postage==1 || item.is_apply_refund_postage==2)" style="background-color: orangered;" class="bottome_right">
										退款中
									</view>
									<view v-if="item.status==12" @click="shouHuo(item)" class="bottome_right">
										确认收货
									</view>
									<view v-if="item.status==11 && item.is_apply_refund_postage==3" style="display: flex; align-items: center;">
										<view @click="tui_info_desc(item)" class="" style="margin-right: 8rpx;font-size: 22rpx; font-weight: 500; color: #ccc;">
											查看驳回原因
										</view>
										<view   @click="youFei_tui(item)" class="bottome_right" >
											再次退款
										</view>
									</view>
									
								</view>
							</view>
						</view>
					</view>
				</view>
				
		    </view>
			<view class="" slot="bottom">
				<view v-if="current==4" class="button_submit">
					<u-button @click="fahuoAll"  class="btns" :custom-style="{'background':'#90c0ff' ,color:'#fff'}"  :shape="'circle'" :hair-line="false" :ripple="true" ripple-bg-color="rgba(9, 82, 200, 0.15)">申请直邮</u-button>
				</view>
			</view>
			
			
		</z-paging>
		<u-popup border-radius="25" v-model="tui_show"  mode="bottom">
			<view class="tui_show">
				<view class="tui_show_title" >退款原因</view>
				<view class="tui_show_text">
					<u-input v-model="tui_text" type="textarea" height="300"  :border="false" placeholder="请输入退款原因" />
				</view>
				<view class="" style="display: flex; justify-content: center;">
					<u-button class="btns" @click="tui_order(tui_info)" :custom-style="{'background':'#90c0ff' ,color:'#fff'}"  :shape="'circle'" :hair-line="false" :ripple="true" ripple-bg-color="rgba(9, 82, 200, 0.15)">
						申请退款
					</u-button>
				</view>
				
			</view>
		</u-popup>
		<u-modal v-model="tui_tost_show" :show-title="false" :content="tui_info.refuse_refund_reason"></u-modal>
		<!-- 选择代买优惠劵 -->
		<u-popup v-model="coupon_show" mode="bottom" border-radius="14" >
			 <view class="address_pop_box" style="padding-top: 0;">
				<view class="address_pop_top" style="border-bottom: 1rpx solid #f2f2f2; padding: 16rpx ;">
					<view class="fahup_pop_box_title">
						选择优惠劵
					</view>
				</view>
				<scroll-view class="scroll_y_address" scroll-y="true">
					<view class="scroll_padding" style="padding: 0 16rpx;" >
						
						<view @click="choose_coupon_list(item , index)" class="" style="display: flex; width: 100%;" v-for="(item,index) in coupon_list" :key="index">
							<u-icon  v-if="item.is_default==1" name="checkmark-circle-fill" color="#6993b7" size="32"></u-icon>
							<u-icon v-else name="checkmark-circle" color="#ccc" size="32"></u-icon>
							<view class="list_item_box_wai" style="flex: 1;margin-left: 10rpx;">
								<view class="list_item_box1">
									<view class="list_item_box_left">
										劵
										<view class="list_item_box_left_small">
											{{item.coupon_data.title}}
										</view>
									</view>
									<view class="list_item_box_right">
										<view class="dian"></view>
										<span style="margin-bottom: 16rpx;">
											 {{item.coupon_name}}
										</span>
										<span><span class="price">Ұ</span>
											{{item.coupon_money}}
										</span>
										<span class="coupon_time">
											{{item.coupon_data.end_time_remark}}
										</span>
										<view class="dian_bottom"></view>
									</view>
								</view>
								<view class="coupon_bottom">
									{{item.coupon_data.remark}}
								</view>
							</view>
							
						</view>
					</view>
				</scroll-view>
				<view class="">
					<u-button class="submit_juan" @click="buyCoupon_count" type="primary" :loading="submit_loading" loadingText="加载中">
						确认使用
					</u-button>
				</view>
				
				<!-- <view class="submit_juan" @click="buyCoupon_count">
					确认使用
				</view> -->
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				submit_loading:false,
				coupon_show:false,
				coupon_list:[],//优惠劵列表
				choose_coupon:{},
				wx_pay_item:{},// 订单支付
				tui_tost_show:false,//退款原因
				tui_info:{},
				tui_show:false,
				youfei_tui_info:{},
				tui_text:'',
				type:1,
				current:0,
				title:'代拍订单',
				dataList:[],
				chooseItem:[],
				item_style:{
					color:'#333',
					fontSize:'28rpx'
				},
				barStyle:{
					background:'#83b9ff',
					height:'4rpx',
					padding:0
				},
				barList:[
					{name: '待审核'},
					{name: '待支付'},
					{name: '待处理'},
					{name: '已处理'},
					{name: '已入库'},
					{name: '申请直邮'},
					{name: '直邮待支付'},
					{name: '直邮待发货'},
					{name: '直邮已发货'},
					{name: '直邮已收货'},
					{name: '直邮退款中'},
					{name: '直邮已取消'},
					{name: '已取消'},
					{name: '退款中'},
					{name: '已退款'},
				],
			}
		},
		onLoad(data) {
			if(data.current){
				this.current = data.current
			}
		},
		onShow() {
			var token = uni.getStorageSync('token')
			if(!token){
				uni.setStorageSync('isModule' , true)
				uni.showModal({
					title: '登录',
					content: '登录后可使用完整功能',
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "确认", // 确认按钮的文字  
					showCancel: true, // 是否显示取消按钮，默认为 true
					success: (res) => {
						uni.setStorageSync('isModule' , false)
					if(res.confirm) {  
						// console.log('comfirm') //点击确定之后执行的代码
						uni.navigateTo({
							url:'/pages/login/login'
						})
					} else {  
						uni.switchTab({
							url:'/pages/index/index'
						})
						}  
					} 
				})
			}
			if(this.$refs.paging){
				this.$refs.paging.reload()	
			}
		},
		
		
		methods: {
			choose_coupon_list(ite , ind){
				
				this.coupon_list.forEach((item , index)=>{
					if(ind == index){
						this.choose_coupon = item
						this.coupon_list[index].is_default = !this.coupon_list[index].is_default
						// this.coupon_show = false
						// this.Settlement_information()
					}else{
						this.coupon_list[index].is_default = 0
					}
				})
			},
			shouHuo(item){
				var that = this
				uni.showModal({
					title: '确认收货',
					content: '请确认是否收到货物!',
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "确认", // 确认按钮的文字  
					showCancel: true, // 是否显示取消按钮，默认为 true
					success: (res) => {
					if(res.confirm) {  
						var data = {
							id:item.id
						}
						that.$gugoApi.confirm_receive(data).then(res=>{
							uni.showToast({
								title:'收货成功',
								icon:'none'
							})
							that.current = 9
							this.$refs.paging.reload()	
						})
					}  
					} 
				})
			},
			tui_info_desc(row){
				row.refuse_refund_reason = row.refuse_refund_reason?row.refuse_refund_reason:'审核不通过'
				this.tui_info = row
				this.tui_tost_show = true
			},
			copy(text){
				 uni.setClipboardData({
					data: text,
					success: function () {
					  uni.showToast({
						title: '复制成功',
						icon: 'success',
						duration: 2000
					  });
					}
				})
			},
			youFei_tui(item){
				var data = {
					id:item.id,
					code:item.code,
					weight:item.weight,
					postage:item.weight,
				}
				data = JSON.stringify(data)
				uni.navigateTo({
					url:`/pages/order_other_list/Postag_refund?data=${data}`
				})
			},
			tui_order(item){
				// 订单退款
				// console.log(item , '需要申请退款的订单')
				if(this.tui_text==''){
					uni.showToast({
						title:'请输入退款原因',	
						icon:'none'
					})
					return
				}
				var data = {
					"id": item.id,
					"remark": this.tui_text
				}
				this.$wqzApi.shop_Buy_application_refund(data).then(res=>{
					this.current = 13
					this.tui_show = false
					this.$refs.paging.reload()	
				})
				
			},
			tui_show_pop(item){
				// 申请退款弹出层
				this.tui_info = item
				this.tui_text = ''
				this.tui_show = true
			},
			youFei_pay(item){
				// 邮费支付
				var data = {
					id:item.id,
				}
				uni.showLoading({
					title:'支付中',
				})
				// console.log(data)
				var that = this
				this.$gugoApi.pay_postage_pay(data).then(res=>{
					// var data = res.data
					window.location.href = res.data
					// 吊起微信支付
					// wx.requestPayment({
					//   timeStamp: data.timeStamp,
					//   nonceStr: data.nonceStr,
					//   package: data.package,
					//   signType: 'MD5',
					//   paySign: data.paySign,
					//   success (res) {
					// 	  uni.hideLoading()
					// 	  uni.showToast({
					// 	  	title:'支付成功',
					// 		icon:'none'
					// 	  })
					// 	  that.current = 7
					// 	 that.$refs.paging.reload()	
					//   },
					//   fail (res) {
					// 	  uni.hideLoading()
						
					// 	  // console.log(res , '支付失败返回')
					//   }
					// })
				}).catch(err=>{
					uni.hideLoading()
				})
			},
		wxPay(id , item){
			this.wx_pay_item = item
			uni.showLoading({
				mask:true
			})
			this.$wqzApi.buy_order_coupon({buy_id:id}).then(res=>{
				this.coupon_list = res.data
				if(this.coupon_list.length>0){
					this.coupon_show = true
					uni.hideLoading()
				}else{
					uni.hideLoading()
					this.h5_pay(this.wx_pay_item.id)
				}
				
			}).catch(err=>{
				uni.hideLoading()
			})
			
		},
		// 代付订单使用优惠劵支付 计算介个并支付
		buyCoupon_count(){
			if(this.submit_loading == true){
				return
			}
			this.submit_loading = true
			var coupon_record_id = null
			this.coupon_list.forEach((item,index)=>{
				if(item.is_default==1){
					coupon_record_id = item.id
				}
			})
			var data = {
				"buy_id":this.wx_pay_item.id,
				"coupon_record_id":coupon_record_id,
			}
			if(coupon_record_id){
				this.$wqzApi.buy_coupon_count(data).then(res=>{
					this.submit_loading = false
					this.h5_pay(this.wx_pay_item.id)
				}).catch(err=>{
					this.submit_loading = false
				})
			}else{
				this.submit_loading = false
				this.h5_pay(this.wx_pay_item.id)
			}
			
		},
		h5_pay(id){
			var data = {
				id:id,
			}
			uni.showLoading({
				title:'支付中',
			})
			this.$wqzApi.pay_buy_pay(data).then(res=>{
				uni.hideLoading()
				window.location.href = res.data
			}).catch(err=>{
				
			})
		},
			delShure(id){
				// 代买代付删除
				var data = {id:id}
				uni.showModal({
					title: '提示',//标题
					content: "确认删除订单",//提示内容可以加入\r\n进行换行
					showCancel: true,//是否显示取消按钮，默认为true
					success: res => {
						if (res.confirm) { //点击确定之后执行的代码
							this.$wqzApi.Buy_del(data).then(res=>{
								uni.showToast({
									title:'删除成功',
									icon:'none'
								})
								this.$refs.paging.reload()
							})
						} else if (res.cancel) { //点击取消之后执行的代码
						}
					},
				});
				
			},
			seeInfo(url) {
				
				if(url){
					uni.showLoading({
						title: '加载中'
					});
					uni.previewImage({
						urls: [url],
						complete: () => {
							uni.hideLoading();
						}
					});
				}
			},
			fahuoAll(){
				// 合并发货
				// console.log(this.chooseItem)
				var str = this.chooseItem.join(',')
				this.navTo('/pages/complete/complete?type='+this.type+'&id='+str)
			},
			toInfo(id){
				var url = ''
				if(this.type==1){
					// type=1 代买订单
					url = '/pages/byeSTH/byeSTH?order_id='+id
				}else{
					// type=2 代买订单
					url = '/pages/pay_for_another/pay_for_another?order_id='+id
				}
				uni.navigateTo({
					url:url
				})
			},
			del(id){
				var that = this
				uni.showModal({
					title: '提示',//标题
					content: "确认取消订单",//提示内容可以加入\r\n进行换行
					showCancel: true,//是否显示取消按钮，默认为true
					success: res => {
						if (res.confirm) { //点击确定之后执行的代码
							that.$wqzApi.buy_status({id:id,"status": 5 }).then(res=>{
								uni.showToast({
									title:'操作成功',
									icon:'none'
								})
								this.$refs.paging.reload()
							})
						} else if (res.cancel) { //点击取消之后执行的代码
						}
					},
				});
			},
			queryList(pageNo, pageSize) {
				/**
				 * @type2 1 代买 2代付
				 * @status0待审核 1待支付 2代采购 3已入库 5已取消
				*/ 
				var data = {
					page:pageNo,
					limit:pageSize,
					status:this.current,
					type2:this.type
				}
				// 0待审核 1待支付 2代采购 3已入库 5已取消  6退款中 7已退款 8已采购 9申请发货
				if(this.current==0) {
					// 待审核
					data.status = 0
				} 
				if(this.current==1) {
					// 待支付
					data.status = 1
				} 
				if(this.current==2) {
					// 代采购
					data.status = 2
				} 
				if(this.current==3){
					// 已处理
					data.status = 8
				}
				if(this.current==4){
					// 已入库
					data.status = 3
				}
				if(this.current==5){
					// 申请发货
					data.status = 9
				}
				if(this.current==6){
					// 支付邮费
					data.status = 10
				}
				if(this.current==7){
					// 直邮待发货
					data.status = 11
				}
				if(this.current==8){
					// 直邮已发货
					data.status = 12
				}
				if(this.current==9){
					// 直邮已收货
					data.status = 14
				}
				if(this.current==10){
					// 直邮退款中
					data.status = 15
				}
				if(this.current==11){
					// 取消直邮
					data.status = 13
				}
				if(this.current==12) {
					// 已取消
					data.status = 5
				} 
				if(this.current==13){
					// 退款中
					data.status = 6
				}
				if(this.current==14) {
					// 已退款
					data.status = 7
				} 
				this.$wqzApi.Buy_list(data).then(res=>{
					// 0待审核 1待支付 2代采购 3已入库 5已取消 6退款中 7已退款 8已采购9 申请合箱发货 
					// 10 待支付邮费 11 已支付邮费待发货 12 已发货  13 取消合箱发货（退款）14已收货 15申请退邮中
					var status_list = res.data.statusCount
					this.barList = [
						{name: `待审核(${status_list.status0})`},
						{name: `待支付(${status_list.status1})`},
						{name: `待处理(${status_list.status2})`},
						{name: `已处理(${status_list.status8})`},
						{name: `已入库(${status_list.status3})`},
						{name: `申请直邮(${status_list.status9})`},
						{name: `直邮待支付(${status_list.status10})`},
						{name: `直邮待发货(${status_list.status11})`},
						{name: `直邮已发货(${status_list.status12})`},
						{name: `直邮已收货(${status_list.status14})`},
						{name: `直邮退款中(${status_list.status15})`},
						{name: `直邮已取消(${status_list.status13})`},
						{name: `已取消(${status_list.status5})`},
						{name: `退款中(${status_list.status6})`},
						{name: `已退款(${status_list.status7})`},
					]
					res.data.list.forEach((item,index)=>{
						if(item.pic){
							var arr = item.pic.split(',')
							res.data.list[index].pic = arr[0]	
						}
						if(item.info_list){
							item.info_list.map(ite=>{
								if(ite.pic){
									var arr = ite.pic.split(',')
									ite.pic_first = arr[0]
								}
							})
						}
						res.data.list[index].isChoose = false
					})
					// console.log(res.data.list)
					this.$refs.paging.complete(res.data.list);
				}).catch(err=>{
					this.$refs.paging.complete(false);
				})
			},
			
			
			barChange(e){
				 
				
				this.current = e
				
				this.$refs.paging.reload()	
				this.chooseItem = []
			},
			radioChoose(key){
				this.dataList.forEach((item,index)=>{
					if(index == key){
						this.dataList[index].isChoose = !this.dataList[index].isChoose
					}
				})
				this.chooseItem = []
				this.dataList.forEach((item,index)=>{
					if(item.isChoose == true){
						this.chooseItem.push(item.id)
					}
					
				})
				// console.log(this.chooseItem )
				if(this.chooseItem.length>1){
					
				}
			},
			navTo(url){
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// @import url(../shop_info/order_pay.scss);
	@import url(./index.scss);
	
</style>
